<template>
	<view class="content">
		<uni-section title="维修流程" type="line" padding>
			<uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" />
		</uni-section>
		<uni-section title="报修信息" type="line">
			<view class="" style="width: 90%;margin:0 auto">
				<uni-forms ref="form" :modelValue="personnel" :rules="rules">
					<uni-forms-item label="报修房屋" name="houseingName" required disabled>
						<uni-easyinput type="text" v-model="personnel.houseingName" placeholder="请输入房屋" />
					</uni-forms-item>
					<uni-forms-item label="维修项目" name="maintenanceProjectsId" required disabled>
						<uni-easyinput v-model="personnel.maintenanceProjectsId"></uni-easyinput>
						<!-- <uni-data-picker placeholder="请选择维修项目" popup-title="请选择家居" :localdata="dataTree" v-model="classes"
						@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
						@popupclosed="onpopupclosed">
					</uni-data-picker> -->
					</uni-forms-item>
					<uni-forms-item label="标题" name="theTitle" required>
						<uni-easyinput type="text" v-model="personnel.theTitle" placeholder="请输入标题" />
					</uni-forms-item>
					<uni-forms-item label="问题描述" name="problemDescription" required>
						<uni-easyinput type="text" v-model="personnel.problemDescription" placeholder="请输入问题描述" />
					</uni-forms-item>
					<uni-forms-item label="手机号码" name="phone" required>
						<uni-easyinput type="text" v-model="personnel.phone" placeholder="请输入手机号码" />
					</uni-forms-item>
					<uni-forms-item label="预约日期" name="appointmentTime" required>
						<uni-datetime-picker type="datetime" return-type="timestamp" timestamp
							v-model="personnel.appointmentTime" />
					</uni-forms-item>
					<uni-forms-item label="附件照片" name="endtime" required>
						<image :src="fileList1"></image>
						<!-- 		<u-upload :fileList="fileList1" width="200" height="150" @afterRead="afterRead" @delete="deletePic"
						name="1" multiple :maxCount="10"></u-upload> -->
					</uni-forms-item>
				</uni-forms>
				<button @click="submitForm" class="button-login" hover-class="button-hover">撤销申请</button>
			</view>
		</uni-section>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				active: 0,
				list2: [{
					title: '已提交',
					desc: '2018-11-11'
				}, {
					title: '审核中',
					desc: '2018-11-12'
				}, {
					title: '审核通过',
					desc: '2018-11-13'
				}, {
					title: '审核失败',
					desc: '2018-11-14'
				}],
				xiaoquname: '', //小区名
				loudongname: '', //楼栋名
				danyuanname: '', //单元名
				loucengname: '', //楼层名

				portalData: '',
				floorId: '',
				floorData: [],
				cellData: [],
				dataTree1: [],
				buildingData: [],
				aa: [],
				children: [],
				classes: '',
				dataTree: [],
				elevatorshow: false,
				flag: true,
				loading: false,
				tabList: [],
				token: '',
				name: '',
				hobby: '男',
				fileList1: [],
				communityId: '',
				cellId: '',
				portalId: '',
				// userId: uni.getStorageSync('loginData').user_id,
				personnel: {
					maintenanceId: '',
					userId: 1,
					houseingName: '',
					maintenanceProjectsId: '',
					theTitle: '',
					problemDescription: '',
					phone: '',
					appointmentTime: '',
					projectTypeId: '',
					communityId: '',
					buildingId: '',
					cellId: '',
					floorId: '',
					portalId: '',
					fileUrl: '',
				},
				rules: {
					// 对name字段进行必填验证
					houseingName: {
						rules: [{
							required: true,
							errorMessage: '请输入房源',
						}, ]
					},
					costId: {
						rules: [{
							required: true,
							errorMessage: '请输入缴费人',
						}, ]
					},
					maintenanceProjectsId: {
						rules: [{
							required: true,
							errorMessage: '请选择维修项目',
						}, ]
					},
					theTitle: {
						rules: [{
							required: true,
							errorMessage: '请输入标题',
						}, ]
					},
					problemDescription: {
						rules: [{
							required: true,
							errorMessage: '请输入问题描述',
						}, ]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入电话号码',
						}, ]
					},
					appointmentTime: {
						rules: [{
							required: true,
							errorMessage: '请输入预约日期',
						}, ]
					},

				}
			}
		},
		created() {
			// // window.localStorage.getItem('token', token)
			// this.token = window.localStorage.getItem('token')
		},
		computed: {
			money() {
				return parseFloat(this.personnel.basisMoney) + parseFloat(this.personnel.otherMoney)
			}
		},
		//初始化路径
		onLoad(val) {
			if (val.item != null) {
				this.personnel = JSON.parse(decodeURIComponent(val.item));
				this.personnel.maintenanceProjectsId = this.personnel.typeName + '/' + this.personnel.theProjectName
				this.fileList1 = this.personnel.fileUrl
				this.maintenanceId = this.personnel.maintenanceId
				if (this.personnel.maintenanceProcess == "审核通过") {
					this.active = 2
				} else if (this.personnel.maintenanceProcess == "已提交") {
					this.active = 0
				} else if (this.personnel.maintenanceProcess == "审核中") {
					this.active = 1
				} else {
					this.active = 3
				}
			}
			this.getMaintenceTree()
			this.findCommunity()

			// const it = JSON.parse(decodeURIComponent(val.item));
			// console.log("输出" + it)
			// for (var i in it) {
			// 	var obj = {
			// 		text: it[i].houseNumber,
			// 		tex1: it[i].ownerId,
			// 		tex2: it[i].tenantsId,
			// 		tex3: it[i].id,
			// 		tex4: it[i].account.userName,
			// 		tex5: it[i].user[i].account,
			// 	}
			// 	console.log("obj为" + this.obj)
			// }
			// this.personnel.houseId = obj.tex3
			// this.personnel.chargeId = obj.tex1
			// this.personnel.houseNumber = obj.text
			// this.personnel.costId = obj.tex2
			// this.personnel.userName = obj.tex4
			// this.personnel.account = obj.tex5
		},
		methods: {
			// change() {
			// 	if (this.active < this.list1.length - 1) {
			// 		this.active += 1
			// 	} else {
			// 		this.active = 0
			// 	}
			// },
			// portalclick(e) {
			// 	//户号id
			// 	this.portalId = e.value
			// 	this.personnel.portalId = e.value
			// 	this.huhaoname = e.text
			// 	this.personnel.houseingName = this.xiaoquname + this.loudongname + this.danyuanname + this.loucengname +
			// 		this.huhaoname
			// 	// this.seetreeunder()
			// 	console.log(this.portalId, "hhhhhhhhhhhhhhhhhhhhhhhh")
			// },
			// floorclick(e) {
			// 	//楼层id
			// 	this.floorId = e.value
			// 	this.personnel.floorId = e.value
			// 	this.loucengname = e.text
			// 	this.findPortal()
			// 	this.portalData = []
			// 	console.log(this.floorId);
			// 	console.log(e)
			// },
			// floorclick(e) {
			// 	this.floorId = e.value
			// 	this.findPortal()
			// 	this.portalData = []
			// 	console.log(this.floorId);
			// 	console.log(e)
			// },
			// cellclick(e) {
			// 	//单元id
			// 	this.cellId = e.value
			// 	this.personnel.cellId = e.value
			// 	this.danyuanname = e.text
			// 	this.findFloor()
			// 	this.floorData = []
			// 	console.log(e)
			// },
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			// buildingclick(e) {
			// 	//楼栋id
			// 	this.buildingId = e.value
			// 	this.personnel.buildingId = e.value
			// 	this.loudongname = e.text
			// 	this.findCell()
			// 	this.cellData = []
			// 	console.log(e)
			// },
			// onnodeclick1(e) {
			// 	//小区id
			// 	this.communityId = e.value
			// 	this.personnel.communityId = e.value
			// 	this.xiaoquname = e.text
			// 	this.findBuilding()
			// 	this.buildingData = []
			// 	console.log(this.communityId);
			// 	console.log(e, "vvvvvvvvvvvvvvvvvvvvvvvvvvvvvv");
			// },
			onchange(e) {
				console.log('onchange:', e);
			},
			// findPortal() {
			// 	this.$axios({
			// 		url: '/housingestate/portal/appFindPortal/' + this.floorId,
			// 		method: 'GET',
			// 		success: (res) => {
			// 			console.log(res)
			// 			if (res.data.code == 20000) {
			// 				console.log(res.data.data.portal)
			// 				let aa = res.data.data.portal
			// 				for (var i = 0; i < aa.length; i++) {
			// 					var param = {
			// 						text: "0" + aa[i].howPortal,
			// 						value: aa[i].portalId
			// 					}
			// 					this.portalData.push(param)
			// 				}

			// 			}
			// 		}
			// 	})
			// },
			// findFloor() {
			// 	this.$axios({
			// 		url: '/housingestate/floor/appFindFloor/' + this.cellId,
			// 		method: 'GET',
			// 		success: (res) => {
			// 			console.log(res)
			// 			if (res.data.code == 20000) {
			// 				console.log(res.data.data.floor)
			// 				let aa = res.data.data.floor
			// 				for (var i = 0; i < aa.length; i++) {
			// 					var param = {
			// 						text: "0" + aa[i].howFloor + "层",
			// 						value: aa[i].floorId
			// 					}
			// 					this.floorData.push(param)
			// 				}

			// 			}
			// 		}
			// 	})
			// },
			// findCell() {
			// 	this.$axios({
			// 		url: '/housingestate/cell/appFindCell/' + this.buildingId,
			// 		method: 'GET',
			// 		success: (res) => {
			// 			console.log(res)
			// 			if (res.data.code == 20000) {
			// 				console.log(res.data.data.cell)
			// 				let aa = res.data.data.cell
			// 				for (var i = 0; i < aa.length; i++) {
			// 					var param = {
			// 						text: "0" + aa[i].cellNumber + "单元",
			// 						value: aa[i].cellId
			// 					}
			// 					this.cellData.push(param)
			// 				}

			// 			}
			// 		}
			// 	})
			// },
			//楼栋
			// findBuilding() {
			// 	this.$axios({
			// 		url: '/housingestate/building/appFindBuilding/' + this.communityId,
			// 		method: 'GET',
			// 		success: (res) => {
			// 			console.log(res)
			// 			if (res.data.code == 20000) {
			// 				console.log(res.data.data.Building)
			// 				let aa = res.data.data.Building
			// 				for (var i = 0; i < aa.length; i++) {
			// 					var param = {
			// 						text: "0" + aa[i].howMany + "栋",
			// 						value: aa[i].buildingId
			// 					}
			// 					this.buildingData.push(param)
			// 				}

			// 			}
			// 		}
			// 	})
			// },
			//小区
			// findCommunity() {
			// 	this.$axios({
			// 		url: '/housingestate/community/appFindAllCommunity',
			// 		method: 'GET',
			// 		success: (res) => {
			// 			console.log(res)
			// 			if (res.data.code == 20000) {
			// 				console.log("11111111111111111111", res.data.data.community)
			// 				let aa = res.data.data.community
			// 				for (var i = 0; i < aa.length; i++) {
			// 					var param = {
			// 						text: aa[i].communityName,
			// 						value: aa[i].communityId
			// 					}
			// 					this.dataTree1.push(param)
			// 				}

			// 			}
			// 		}
			// 	})
			// },
			//获取项目类类型
			getMaintenceTree() {
				this.$axios({
					url: '/systemuser/maintenance/getMaintenceTree',
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							for (var i = 0; i < res.data.data.list.length; i++) {
								var param = {
									text: res.data.data.list[i].typeName,
									value: res.data.data.list[i].projectTypeId,
									children: []
								}
								for (var v = 0; v < res.data.data.list[i].maintenances.length; v++) {
									var param1 = {
										text: res.data.data.list[i].maintenances[v].theProjectName,
										value: res.data.data.list[i].maintenances[v].maintenanceProjectsId,
									}
									param.children.push(param1)
								}
								this.dataTree.push(param)
								console.log(this.dataTree, "///////////////////////////////////")
							}
						}
					}
				})
			},

			onpopupopened(e) {
				console.log('popupopened2222222');
			},
			onnodeclick(e) {
				this.personnel.maintenanceProjectsId = e.value
				this.personnel.projectTypeId = e.parent_value
				console.log(e, "hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh");
			},
			onchange(e) {
				console.log('onchange:', e);

			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://localhost/systemuser/maintenance/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							this.personnel.fileUrl = res.data
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},

			/* 选择账单类型回显 */
			choosedecorate(index) {
				this.personnel.billName = this.decoratelist[index].text
			},
			findelevator() {
				this.elevatorshow = true
			},
			sum() {
				this.personnel.money = parseFloat(this.personnel.basisMoney) + parseFloat(this.personnel.otherMoney)
			},
			onTapCell() {
				uni.navigateTo({
					url: './login',
				})
			},

			fh() {
				uni.showModal({
					content: '！！！',
					showCancel: false
				});
				uni.navigateTo({
					url: './login?statu=' + this.statu
				})
			},
			cz() {
				this.personnel = {}; //表单重置
			},
			// 提交按钮
			submitForm(ref) {
				debugger
				this.$axios({
					url: '/systemuser/maintenance/deleteMaintence?maintenanceId=' + this.personnel
						.maintenanceId,
					method: 'DELETE',
					success: (res) => {
						if (res.data.code == 20000) {
							console.log(res.data)
							uni.showModal({
								content: '撤销成功！！！',
								showCancel: false
							});
							uni.navigateTo({
								url: './jianxiu'
							})
						} else {
							uni.showModal({
								content: '撤销失败！！！',
								showCancel: false
							});
						}
					}
				})

			},
		}
	}
</script>
<style>
	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(58, 163, 255, 1.0), rgba(255, 197, 131, 1.0));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}

	/* 	.button-login {
		background-color: #2B85E4;
		width: 100%;
	} */

	.button-hover {
		background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
	}

	.inputBox {
		display: flex;
		flex-direction: column;
		padding-top: 50rpx;
		padding-left: 70rpx;
		padding-right: 70rpx;
	}

	image {
		width: 300rpx;
		height: 240rpx;
	}

	.button-zhuce {
		color: #ffa800;
		font-size: 34rpx;
		width: 200rpx;
		height: 10rpx;
		/* text-align: right; */
		margin-left: 230rpx;
		margin-top: 30rpx;
	}

	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}

	.dd {
		width: 230rpx;
		height: 50rpx;
		font-size: 10rpx;
		background-color: #DD6161;
		text-align: center;
	}
</style>
